<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>个人博客后台</title>
    <!--<link th:href="@{/assets/css/bootstrap.css}" rel="stylesheet"/>-->
    <link th:href="@{/css/bootstraps.css}" rel="stylesheet" />
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link th:href="@{/assets/js/morris/morris-0.4.3.min.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/custom-styles.css}" rel="stylesheet"/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <link th:href="@{/assets/js/dataTables/dataTables.bootstrap.css}" rel="stylesheet"/>
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <style>
        label {
            margin-top: 5px;
        }
    </style>
</head>

<body>

<div id="wrapper">

    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" th:href="@{'/manager/user'}">个人博客后台</a>
            <a class="navbar-brand" th:href="@{'/admin/sign_out'}">退出</a>
        </div>
    </nav>
    <!--/. NAV TOP  -->

    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a th:href="@{'/manager/user'}"><i class="fa fa-user"></i> 用户管理</a>
                </li>
                <li>
                    <a class="active-menu" th:href="@{'/manager/category'}"><i class="fa fa-bars"></i> 分类管理</a>
                </li>
                <li>
                    <a th:href="@{'/manager/article'}"><i class="fa fa-file-text-o"></i> 文章管理</a>
                </li>
                <li>
                    <a th:href="@{'/manager/comment'}"><i class="fa fa-envelope"></i> 评论管理</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div id="page-inner">

            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        分类管理
                        <small>Category of my blog</small>
                    </h1>
                </div>
            </div>
            <!-- /. ROW  -->

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="panel panel-default text-left no-boder">
                        <div class="panel-heading">
                            分类列表
                            <button style="float: right;" class="btn btn-success" onclick="addCategory()">添加分类</button>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-categoris">
                                    <thead>
                                    <tr>
                                        <th>分类ID</th>
                                        <th>分类名称</th>
                                        <th>分类描述</th>
                                        <th>文章数量</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody-categoris">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /. ROW  -->

            <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header alert-success">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">添加分类</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <label>分类名称：</label>
                                    <input class="form-control" id="addName">
                                </div>
                            </div>
                            <!-- /. END ROW -->
                            <div class="row">
                                <div class="col-md-12">
                                    <label>分类描述：</label>
                                    <input class="form-control" id="addDescription">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="addCategoryBtn" class="btn btn-success" data-dismiss="modal">确认添加
                            </button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>

                    </div>
                </div>
            </div>

            <footer>
                <p>Copyright &copy; 2020</p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert-danger">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">警告信息</h4>
            </div>
            <div class="modal-body">
                请确认是否删除！
            </div>
            <div class="modal-footer">
                <button type="button" id="confirmBtn" class="btn btn-danger" data-dismiss="modal" categoryId="">确认
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>
<!-- /. END MODAL -->


<!-- 更新分类 -->
<!-- MODAL -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert-success">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">更新分类</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <label>分类名称：</label>
                        <input class="form-control" id="name">
                    </div>
                </div>
                <!-- /. END ROW -->
                <div class="row">
                    <div class="col-md-12">
                        <label>分类描述：</label>
                        <input class="form-control" id="description">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="updateBtn" class="btn btn-success" data-dismiss="modal" categoryId="">确认更新
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>
<!-- /. END MODAL -->




<!-- JS Scripts-->
<!-- jQuery Js -->
<script th:src="@{/assets/js/jquery-1.10.2.js}"></script>
<!-- Bootstrap Js -->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!-- Metis Menu Js -->
<script th:src="@{/assets/js/jquery.metisMenu.js}"></script>
<!-- Morris Chart Js -->
<script th:src="@{/assets/js/morris/raphael-2.1.0.min.js}"></script>
<script th:src="@{/assets/js/morris/morris.js}"></script>
<!-- DATA TABLE SCRIPTS -->
<script th:src="@{/assets/js/dataTables/jquery.dataTables.js}"></script>
<script th:src="@{/assets/js/dataTables/dataTables.bootstrap.js}"></script>
<!-- 引入自己写的JS -->
<script th:src="@{/assets/js/pages/category.js}"></script>
<!-- Custom Js -->
<script th:src="@{/assets/js/custom-scripts.js}"></script>
<script th:src="@{/toastr/toastr.min.js}"></script>

</body>
</html>